<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 通常，图片在被创建时才会被加载。所以，当我们向页面中添加 <img> 时，用户不会立即看到图片。浏览器首先需要加载它。
        let img1 = document.createElement('img');
        img1.src = 'images/2.jpeg';
        let img2 = document.createElement('img');
        img2.src = 'images/3.jpeg';
        let img3 = document.createElement('img');
        img3.src = 'images/4.jpeg';
        let imgList = [img1, img2, img3];
        function callback() {
            alert('图片加载成功');
        }


        function preloadImages(sources, callbackResult) {
            let successSum = 0;
            let errorSum = 0;
            for (let i = 0; i < sources.length; i++) {
                sources[i].onload = function () {
                    successSum++;
                }
                sources[i].onerror = function () {
                    errorSum++;
                }
            }
            if (successSum === sources.length) {
                callbackResult();
            }

        }
        preloadImages(imgList, callback());



    </script>
</body>

</html>